<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
</head>
<body>
	<!-- 
	向服务器提交数据的两种方法：
		①表单提交法（同步提交法）
		②AJAX提交法（异步提交法）
	“输入框失去焦点时验证用户名是否已被占用”只能使用方法2
	注意：访问当前页面必须通过自己编写的Node.js服务器(8080端口)托管访问
	不能通过HBuilder提供的占用8848端口的服务器访问！！！！！
	-->

	<!-- HTML元素的ID就是它的名号，可以直接在JS中当变量使用 -->
	用户名：
	<input type="text" id="yongHuMing"> 
	<span id="yongHuMingTiShi">用户名长度在8~16位之间</span>	<br>
	
	密码：<input type="password">  <br>
	<input type="button" value="提交注册信息">
	
	<!-- 客户端JS——推荐编写在body的最后 -->
	<script>
		//监听输入框的失去焦点事件(blur)
		yongHuMing.onblur = function(){
			//获取输入框中当前的输入内容
			let  n = yongHuMing.value
			//准备访问服务器端动态数据接口
			let url = 'http://127.0.0.1:8080/v2/user/check_uname?uname=' + n
			/************使用AJAX技术异步请求服务器端接口数据**************/
			//①创建请求对象
			let req = new XMLHttpRequest()	
			//②打开到服务器的连接
			req.open('get', url)
			//③发送请求消息
			req.send()
			//④当接收到响应消息时加以处理   load：加载完成
			req.onload = function(){
				console.log(req.responseText)  //响应消息的中的文本
				if(req.responseText==='exists'){
					yongHuMingTiShi.innerHTML = '抱歉！用户名已被占用'
				}else {
					yongHuMingTiShi.innerHTML = '恭喜！用户名未被占用'
				}
			}
		}
	</script>
</body>
</html>